import {StyleSheet, Text, View, StatusBar, Platform} from "react-native";
import React, { Component } from "react";
import {Actions} from "react-native-router-flux";
import LinearGradient from "react-native-linear-gradient";
import Resolution from "../tools/Resolution"

let navHeight = Platform.OS === 'android' ? 40 : 64;
export default class NavigationComponent extends Component{

    constructor(props){
        super(props)
    }

    render(): React.ReactNode {

        return <LinearGradient  colors={[ '#FFC83B','#FEA325']} end={{ x: 0, y: 0}} start={{ x: 1, y: 0}}  style={{height: 88+navHeight}}>

            <LinearGradient colors={[ '#FFC83B','#FEA325']} end={{ x: 0, y: 0}} start={{ x: 1, y: 0}} style={styles.container}>



                <View style={styles.leftWarp}>
                    {
                        this.props.back?<Text onPress={Actions.pop} style={styles.backIcon}>返回</Text>:null
                    }

                </View>
                <Text style={styles.title}>
                    {
                        this.props.title
                    }
                </Text>
                <View style={styles.leftWarp}>
                    <Text onPress={()=>{
                        this.props.rightClick();
                    }} style={styles.search}>
                        {
                            this.props.rightTitle
                        }
                    </Text>

                </View>
            </LinearGradient>
        </LinearGradient> ;
    }
}

const styles = StyleSheet.create({
    container:{
        backgroundColor:"orange",
        height:88,
        flexDirection:"row",
        width: 750,
        position:"absolute",
        marginTop: navHeight

    },
    title:{
        textAlign:"center",
        color:"#fff",
        fontSize:36,
        flex: 1,
        lineHeight:88
    },
    leftWarp:{
        width:80,
        lineHeight:88

    },
    backIcon:{
        marginLeft:8,
        color:"#fff",
        lineHeight:88,
        fontSize: 32
    },
    search:{
        marginLeft:8,
        marginTop:35,
        color:"#fff"
    }
});